<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>非单_组件</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="root">
            <!-- 第三步  编写组件标签 -->
           <School></School>
            <hr />
            <Student></Student>
        </div>
    </body>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
       
        //第一步 创建school组件
        const School = Vue.extend({
            // 这里不要写el配置项  配置项写在最外层vm中
            template:`
                <div>
                    <h3>学校名称:{{schoolName}}</h3>
                    <h3>学校地址:{{address}}</h3>    
                </div>
            `,
            data(){
                return {
                    schoolName:'尚硅谷',
                    address:'北京昌平北七家',   
                }
            } 
        })
        //第一步 创建student组件
        const Student = Vue.extend({
            // 这里不要写el配置项  配置项写在最外层vm中
            template:`
                <div>
                    <h3>学员姓名:{{studentName}}</h3>
                    <h3>学员年龄:{{age}}</h3>    
                </div>
            `,
            data(){
                return {
                    studentName:'小王',
                    age:24
                }
            } 
        })
        

        new Vue({
            el:'#root',
            // 第二步 注册组件
            components:{
                School,
                Student
            }
        })
    </script>
</html>